<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/li_guang_ming/vipL.css">
  <script src="../../js/li_guang_ming/vipL.js"></script>
  <link rel="stylesheet" href="../../fonts/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../js/li_guang_ming/bootstrap-4.6.1-dist/css/bootstrap.min.css">
  <script src="../../js/li_guang_ming/bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
  <script src="../../js/li_guang_ming/bootstrap-4.6.1-dist/jQuery.js"></script>

<body>
  <section>
    <!-- 模态 -->


    <!-- 头部标题 -->

    <h5 class="myh5">会员列表(共80条)</h5>

    <!-- 输入组 -->
    <div class="iputbox">
      <label for="" class="myinput">用户名：
        <input type="text" class="form-control" placeholder="请输入用户名">
      </label>
      <label for="" class="myinput">手机号：
        <input type="text" class="form-control" placeholder="请输入手机号">
      </label>
      <label for="" class="myinput">邀请码：
        <input type="text" class="form-control" placeholder="请输入邀请码">
      </label>
      <br>

      <label for="" class="myinput">用户等级：
        <input type="option" class="form-control" placeholder="全部">

      </label>

      <label for="" class="myinput">用户分组：
        <input type="text" class="form-control  col-md-12" placeholder="全部">
      </label>
      <button class="btn btn-primary" id="btn" type="button">搜索</button>
    </div>


    <!-- 添加用户div -->
    <div class="group">
      <a href="./vipListAdd.html"><button class="btn btn-primary" id="modal" type="button" value="">添加用户</button></a>
      <span class="grouo-1">共922条数据</span>
    </div>

    <!-- 表格表单 -->
    <div class="tablebox">
      <table class="table">
        <thead class="thead-light">
          <tr>
            <th scope="col">头像</th>
            <th scope="col">用户名</th>
            <th scope="col">我的推荐码</th>
            <th scope="col">等级</th>
            <th scope="col">手机号</th>
            <th scope="col">上级推荐码</th>
            <th scope="col">注册时间</th>
            <th scope="col">最后登录时间</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody id="mytbody">

        </tbody>
      </table>
    </div>

    <!-- 页码 -->

    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="page-item" onclick="pageNum1()"><a class="page-link" href="#">1</a></li>
        <li class="page-item" onclick="pageNum1()"><a class="page-link" href="#">2</a></li>
        <li class="page-item" onclick="pageNum1()"><a class="page-link" href="#">3</a></li>
        <li class="page-item" onclick="pageNum1()"><a class="page-link" href="#">4</a></li>
        <li class="page-item" onclick="pageNum1()"><a class="page-link" href="#">5</a></li>
        <li class="page-item" onclick="pageNum1()"><a class="page-link" href="#">6</a></li>
        <li class="page-item" onclick="pageNum1()">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>


  </section>
  <script>
    let arr1 = [{
        "头像": "◓",
        "用户名": "张三",
        "我的推荐码": "UAIEHJ",
        "等级": "一级",
        "手机号": 15000000000,
        "上级推荐码": "GRAH5",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },

      {
        "头像": "◓",
        "用户名": "李四",
        "我的推荐码": "UAIEH5",
        "等级": "二级",
        "手机号": 15000000001,
        "上级推荐码": "VA23H",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },

      {
        "头像": "◓",
        "用户名": "王五",
        "我的推荐码": "UAIEH6",
        "等级": "三级",
        "手机号": 15000000002,
        "上级推荐码": "XAAGJ",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },

      {
        "头像": "◓",
        "用户名": "赵六",
        "我的推荐码": "KBEH7",
        "等级": "二级",
        "手机号": 15000000003,
        "上级推荐码": "XAAG",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },
      {
        "头像": "◓",
        "用户名": "钱八",
        "我的推荐码": "V7EH7",
        "等级": "一级",
        "手机号": 15000000005,
        "上级推荐码": "XAAG",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },
      {
        "头像": "◓",
        "用户名": "刘七",
        "我的推荐码": "XAAGJ",
        "等级": "二级",
        "手机号": 15000000006,
        "上级推荐码": "XAAG",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },

      {
        "头像": "◓",
        "用户名": "今天",
        "我的推荐码": "UAIEHJ",
        "等级": "三级",
        "手机号": 15000000007,
        "上级推荐码": "GRAH5",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },

      {
        "头像": "◓",
        "用户名": "上四",
        "我的推荐码": "UAIEH5",
        "等级": "二级",
        "手机号": 15000000008,
        "上级推荐码": "VA23H",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },

      {
        "头像": "◓",
        "用户名": "芳芳",
        "我的推荐码": "UAIEH6",
        "等级": "二",
        "手机号": 15000000009,
        "上级推荐码": "XAAGJ",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },

      {
        "头像": "◓",
        "用户名": "淡粉",
        "我的推荐码": "KBEH7",
        "等级": "一级",
        "手机号": 15000000010,
        "上级推荐码": "XAAG",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },

      {
        "头像": "◓",
        "用户名": "太过分",
        "我的推荐码": "V7EH7",
        "等级": "一级",
        "手机号": 15000000011,
        "上级推荐码": "XAAG",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      },

      {
        "头像": "◓",
        "用户名": "范德萨",
        "我的推荐码": "XAAGJ",
        "等级": "一级",
        "手机号": 15000000012,
        "上级推荐码": "XAAG",
        "注册时间": "2019.01.0110:00",
        "最后登录时间": "2019.01.01-10:00"
      }
    ]

    pageNum(1)
    showPage(arr1)
    // 渲染数据
    function pageNum(page) {
      let qishi = (page - 1) * 6

      let newArr = arr1.slice(qishi, qishi + 6)
      console.log(newArr);
      showDate(newArr)
    }

    function showDate(data) {
      let mybody = document.getElementById("mytbody")
      for (let i = 0; i < data.length; i++) {
        mytbody.innerHTML += `
<tr>
  <td>${data[i].头像}</td>
  <td>${data[i].用户名}</td>
  <td>${data[i].我的推荐码}</td>
  <td>${data[i].等级}</td>
  <td>${data[i].手机号}</td>
  <td>${data[i].上级推荐码}</td>
  <td>${data[i].注册时间}</td>
  <td>${data[i].最后登录时间}</td>
  <td>
   <a href="./vipListEdit.html"  id="bianji">编辑</a>
   <a href="" onclick="shanchu()" id="shanchu">删除</a>
   <a href="">查看</a>
  </td>
  </tr>`
      }
    }

    function showPage(data) {
      let mypage = document.getElementById("mypage");
      let maxPage = Math.ceil(data.length / 6)
      for (let i = 0; i < maxPage; i++) {
        mypage.innerHTML += `
  <div class='item' onclick='pageNum(${i})'> ${i}</div> `
      }
    }

    function pageNum1(data) {
      pageNum(1)
    }
  </script>
</body>

</html>